<template>
          <!-- 表格开始 -->
      <el-table
          :data="data"
          v-loading="isLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
      >
          <el-table-column
            label="序号"
            width="60"
            type="index">
          </el-table-column>
          <el-table-column
            label="所属学科"
            width="230">
            <template slot-scope="scope">
              <span>{{scope.row.subjectName}}</span>
            </template>
          </el-table-column>
          <el-table-column

            :label="cTitle"
            width="230">
            <template slot-scope="scope">
              <span>
                {{ scope.row.tagName ? scope.row.tagName : scope.row.directoryName}}
                </span>
            </template>
          </el-table-column>
           <el-table-column
            label="创建者"
            width="230">
            <template slot-scope="scope">
              <span>{{scope.row.creatorID}}</span>
            </template>
          </el-table-column>
          <el-table-column

             label="创建日期"
             width="240">
            <template slot-scope="scope">
              <span>{{scope.row.addDate}}</span>
            </template>
          </el-table-column>
          <el-table-column
             label="面试题数量"
             width="230">
            <template slot-scope="scope">
              <span>{{scope.row.totals}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="230">
            <template slot-scope="scope">
              <span v-if="scope.row.state===1">已启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
           <el-table-column
            fixed="right"
            prop="handle"
            label="操作"
            width="150">
             <template slot-scope="scope">
              <el-button  type="text" size="small"  @click="editState(scope.row)">
                <span >{{scope.row.state ===1 ? '禁用' : '启用'}}</span>
              </el-button>
              <el-button
              type="text"
              size="small"
              :disabled="scope.row.state ===0"
              @click="edit(scope.row)">修改</el-button>
              <el-button
              type="text"
              size="small"
              :disabled="scope.row.state===0"
              @click="del(scope.row)"
              >删除</el-button>
             </template>
          </el-table-column>
      </el-table>
      <!-- end -->
</template>
<script>

export default {
  name: 'TableList',
  props: {
    data: {
      type: Array
    },
    name: {
      type: String
    }
  },
  computed: {
    cTitle () {
      return this.name + '名称'
    }
  },
  data () {
    return {
      isLoading: false
    }
  },
  methods: {
    editState (data) {
      this.$emit('editState', data)
    },
    edit (data) {
      console.log(data)
      this.$emit('edit', data)
    },
    del (data) {
      this.$emit('del', data)
    }
  }
}
</script>
